<template>
  <view class="video-detail-container">
    <hot-video-item
      :danmuList="danmuList"
      :videoData="videoData"
      @CommentListChange="onCommentListChange"
      ref="hotVideoRef"
    ></hot-video-item>
    <!-- 加载动画 -->
    <uni-load-more status="loading" v-if="loadingMore" />
    <empty-list v-else-if="commentList.length === 0"></empty-list>

    <!-- 弹幕评论 -->
    <view class="danmu-contaier" v-else>
      <view class="title">全部弹幕</view>
      <view class="danmu-list">
        <block v-for="(item, index) in commentList" :key="index">
          <article-comment-item :data="item"></article-comment-item>
        </block>
      </view>
    </view>
    <!-- 底部区域 -->
    <view class="bottom">
      <article-bottom
        @changeIsPraise="onChangeIsPraise"
        @onComment="onCommentClick"
        :articleId="videoId"
        placeHolder="发个弹幕，开心一下"
      >
      </article-bottom>
      <!-- popup区域 -->
      <uni-popup ref="popup" type="bottom" @change="popupChange">
        <article-comment-commit
          v-if="isShowPopup"
          :articleId="videoData.id"
          @commentSuccess="onCommentSuccess"
        ></article-comment-commit>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import { getVideoDanmuListAPI } from "../../../apis/video";
import { mapState } from "vuex";
import ArticleCommentItem from "../../../components/article-comment-item/article-comment-item.vue";
import hotVideoItem from "../../../components/hot-video-item/hot-video-item.vue";
import ArticleBottom from '../../../components/article-bottom/article-bottom.vue';
import { getRandomColor } from "../../../utils";
import EmptyList from '../../../components/empty-list/empty-list.vue';
export default {
  components: { hotVideoItem, ArticleCommentItem, ArticleBottom, EmptyList },
  data() {
    return {
      // videoData:{}
      danmuList: [],
      commentList:[],
      isShowPopup: false,
      videoId:'',
      loadingMore:true,
    };
  },
  created() {
    this.getDanmuData();
    // console.log('iam'+this.videoData.id);

  },
  onLoad(){
    this.videoId = this.videoData.id
  },
  methods: {
    async getDanmuData() {
      const { data } = await getVideoDanmuListAPI({
        videoId: this.videoData.id,
      });
      // console.log('danmuList为');
      // console.log(data);
      data.list.forEach(item => {
        item.color=getRandomColor()
      });
      this.danmuList = [...data.list];
      this.commentList = [...data.list]
      this.loadingMore = false
    },
    onChangeIsPraise(val) {
      // this.articleDetail.isPraise = val
    },
    onCommentClick(){
      // console.log('我click了');
      this.$refs.popup.open()
    },
    onCommentListChange(val){
      this.commentList.unshift(val)
    },
    popupChange(e){
      if(e.show){
        this.isShowPopup=e.show
      }else{
        setTimeout(()=>{
          this.isShowPopup=e.show
        },200)
      }
    },
    async onCommentSuccess(val){
      // console.log(val);
      await this.$refs.hotVideoRef.onSendDanmu(val)
      this.$refs.popup.close()
      this.isShowPopup=false
      uni.showToast({title:'弹幕发送成功'})
    }
  },
  computed: {
    ...mapState("video", ["videoData"]),
  },
};
</script>

<style lang="scss" scoped>
.bottom{
  z-index: 9;
}
</style>
